{#include file="top_r.php"#}
<script type="text/javascript">
    $(document).ready(function(){
        load_memberBar();
        memberBar();
    });
    function memberBar(){
        setInterval(load_memberBar,1000*60*18);
    }

    function load_memberBar(){
        $.ajax({

            url : '/member.php?action=ajax_memberBar&url='+encodeURIComponent(document.location.href),
            {#php#}
            $action=$_GET['action'];
            if($action=="reg" || $action=="login" || $action=="login_fnb") echo "url : '/member.php?action=ajax_memberBar&url=index',";
            {#/php#}
            type : 'POST',
            dataType : 'html',
            success: function(html){
                var Template = html;
                //$("#topmember").html(html);
            }
        });
    }
    function showpop(text){
        $("#fullbg").fadeIn();
        $("#dialog1").fadeOut('slow');
        $("#dialog3").fadeOut('slow');
        $("#dialog").fadeOut('slow');
        showLB('#dialog_popup',0);
        $("#popupText").text(text);
    }
    function callback(content){
        $('#mark2').empty();
        //showpop(content['retcode']+content['msg']);
        switch(content['retcode']){
            case 1:
                $('#mark1').html('<span class="sp_pink">x</span>'+content['msg']);
                //showpop(content['msg']);
                window.scrollTo(0,400);
                //window.location.href="{#$toURL#}#part_2";
                break;
            case 2:
                $('#mark2').html('<span class="sp_pink">x</span>'+content['msg']);
                //showpop(content['msg']);
                window.scrollTo(0,500);
                //window.location.href="{#$toURL#}#part_3";
                break;
            case 3:
                $('#mark3_'+content['data'][0]).html('<span class="sp_pink">x</span>'+content['msg']);
                //showpop(content['msg']);
                window.scrollTo(0,800);
                //window.location.href="{#$toURL#}#part_3";
                break;
            case 4:
                $('#mark4').html('<span class="sp_pink">x</span>'+content['msg']);
                //showpop(content['msg']);
                window.scrollTo(0,99999);
                //window.location.href="{#$toURL#}#part_4";
                break;
            case 5:
                $('#rep_show_bt').attr("href","{#optimize_url('product', 'detail', 'mtype='|cat:$mtype|cat:'&pid='|cat:$pid)#}");
                showLB('#dialog',0);
                break;
            case 6:
                showpop(content['msg']);
                break;
            case 7:
                $('#rep_show_bt1').attr("href","{#optimize_url('product', 'detail', 'mtype='|cat:$mtype|cat:'&pid='|cat:$pid)#}");
                showLB('#dialog3',0);
                break;
            default:
                showpop(content['msg']);
                break;
            }
        }

        function pempty(s){
            $('#'+s).html('&nbsp;');
        }

        function showLB(ct,n){
            var sh=$(document).height();
            var sw=$(document).width();
            var st=$(window).scrollTop();
            var ch=$(window).height();
            var cw=$(window).width();
            var tbT=(Number(ch)/3+Number(st))+"px";
            var tbL=(Number(cw)/2)+"px";
            if(n==0){
                $("#fullbg").css({width:sw,height:sh});
                $(ct).css({top:tbT,left:tbL});
                $("#fullbg").fadeTo('slow', 0.4);
                $(ct).fadeIn('slow');
                $(window).scroll(function(){showLB(ct,1)});
                $(window).resize(function(){showLB(ct,1)});
            }else{
                if($("#fullbg").css("display")=="block"){
                    $("#fullbg").css({width:sw,height:sh});
                    $(ct).css({top:tbT,left:tbL});
                }
            }
        }

        function closeLB(){
            $("#fullbg").fadeOut('slow');
            $('#dialog').fadeOut('slow');
            $('#dialog1').fadeOut('slow');
            $('#dialog_popup').fadeOut('slow');

        }

        function s_t(s){
            var c = $('['+s+'=1]');
            if(parseInt(c.attr('v'))==0){
                c.show();
                c.attr('v',1);
            }else{
                c.hide();
                c.attr('v',0);
            }
        }
        function s_c(t,s,f){
            $('#'+f).val($(t).attr('v'));
            $('['+s+'=0]').html($(t).html());
            $('['+s+'=1]').hide();
            $('['+s+'=1]').attr('v',0);
        }

        function ireset(){
            $('.p_text_s').html('');
            $('#title').val('');
            $('#age_txt').html('{#$agegroup.result.0.cname#}');
            $('#age').val('1');
            $('#skin_txt').html('{#$body_skin.result.0.cname#}');
            $('#skin').val('1');
            $('#est3').attr("checked",'true');
            $('[s="star"]').removeClass();
            $('[s="star"]').addClass('star star_1');
            $('[s="score"]').val('1');
            $('[s="img"]').attr('src','/data/p100x100.jpg');
            $('[s="pic_path"]').val('');
            $('[s="pic_c"]').val('');
            $('[s="fileinfo"]').html('未選擇檔案');
            $('[s="file_upload"]').val('');
            $('[s="pic_info"]').val('');
            $('#content').val('');
            $('#content_size').val('');
            $('[s="pic_info_size"]').val('');
            $('[s="upload"]').show();
            $('[s="del"]').hide();
        }

        function delpic(i){
            $('#showimg'+i).attr('src','/data/p100x100.jpg');
            $('#pic_path'+i).val('');
            $('#pic_c'+i).val('');
            $('#fileinfo'+i).html('未選擇檔案');
            $('#pic'+i).val('');
            $('#delpic_'+i).hide();
            $('#addpic_'+i).show();
            $('#pic_info_size'+i).val('');
        }
</script>

<div class="body">
    <div class="pro_detail_box {#if $product.member_type eq 5#}pro_detail_box_exp_r{#else#}pro_detail_box_try_r{#/if#} b_box">
        <div class="hd">
            <h2 class="hd_title">{#$mtxt#}評鑑報告 </h2>
        </div>
        <div class="bd">
            <div class="part_1">
				<div class="img_box"><p class="img_p"><span><img src="{#$product._photo_url#}" alt="{#$product._photo_url#}" ></span></p></div>
                <table class="product_tb" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td class="td_l">產品所屬品牌</td><td>{#$product.type_name#}</td>
                    </tr>
                    <tr>
                        <td class="td_l">產品英文名稱</td><td>{#$product.name#}</td>
                    </tr>
                    <tr>
                        <td class="td_l">產品中文名稱</td><td>{#$product.cname#}</td>
                    </tr>
                    <tr>
                        <td class="td_l">價格</td><td>$ {#intval($product.price)#}</td>
                    </tr>
                    {#foreach from=$product['_attr'] item=v key=k#}
                    <tr>
                        <td class="td_l">{#$k#}</td>
                        <td>{#$v#}</td>
                    </tr>
                    {#/foreach#}
                    <tr>
                        <td class="td_l">{#$mtxt#}期間</td>
                        <td>{#date('Y-m-d',strtotime($product.report_starttime))#} — {#date('Y-m-d',strtotime($product.report_endtime))#}</td>
                    </tr>
                    <tr>
                        <td class="td_l">{#$mtxt#}日數</td><td>{#$product._diff_day#}</td>
                    </tr>
                    <tr>
                        <td class="td_l">試用規格</td><td>{#$product.capacity_trial#}</td>
                    </tr>
                    <tr>
                        <td class="td_l">遞交{#$mtxt#}報告截止時間</td><td>{#$product.my_report_endtime#}</td>
                    </tr>
                </table>
            </div>

            <form action='/product.php?action=report_add' method='post' target='iframe1' name='pic_form' id='pic_form'>
                <input type='hidden' name='pid' value='{#$pid#}' />
                <input type='hidden' name='issubmit' value='true' />

                <div class="part_2" id="part_2" name="part_2">
                    <h3 class="c_title">請必須填寫各項有關產品{#$mtxt#}後的評鑑意見：</h3>

                    <div class="details_box">
                        <span class="span_l">標題</span>
                        <input type="text" class="ipt_title" name="title" value="" id="title" onfocus="pempty('mark1')" maxlength="80"/>
                        <span class="p_text_s" id='mark1'>&nbsp;</span>
                    </div>
                    <div class="details_box details_box_1 details_box_z1">
                        <span class="span_l">年齡</span>
                        <div class="droplist_box">
                            <a id='age_txt' class="choose" href="javascript:void(0);" c1=0 onclick="s_t('c1')">{#$agegroup.result.0.cname#}</a>
                            <ul class="drop_list drop_list_1" c1=1 v=0 style='display:none'>
                                {#foreach  from=$agegroup.result item=v key=k#}
                                <li v='{#$v.id#}' style='cursor:pointer;' onclick="s_c(this,'c1','age')">{#$v.cname#}</li>
                                {#/foreach#}
                            </ul>
                            <input type='hidden' name='age' id='age' value='1' />

                        </div>
                        <span class="span_sp">臉部膚質</span>
                        <div class="droplist_box">
                            <a id='skin_txt' class="choose" href="javascript:void(0);" c2=0 onclick="s_t('c2')">{#$body_skin.result.0.cname#}</a>
                            <ul class="drop_list drop_list_2" c2=1 v=0 style='display:none;left:330px;'>
                                {#foreach  from=$body_skin.result item=v key=k#}
                                <li v='{#$v.id#}' style='cursor:pointer;' onclick="s_c(this,'c2','skin')">{#$v.cname#}</li>
                                {#/foreach#}
                            </ul>
                            <input type='hidden' name='skin' id='skin' value='1' />
                        </div>
                    </div>
                    <div class="details_box details_box_1 details_box_z2">
                        <span class="span_l">產品整體滿意度</span>
                        {#foreach  from=$product_reports_well.result item=v key=k#}
                        <input type='radio' class="ipt_radio" id="est{#$k+1#}" name='well' value='{#$v.id#}'  {#if $k==2#}checked{#/if#}/><label for="">{#$v.cname#}</label>
                        {#/foreach#}
                    </div>
                    {#if !empty($vote_option_data.result)#}
                    <div class="details_box details_box_last">
                        <span class="span_l">產品功能評分</span>
                        <div class="star_box">
                            <table>
                                <tr>
                                    {#foreach  from=$vote_option_data.result item=v key=k#}
                                    <th>{#$v.cname#}</th>
                                    <td><div class="star star_1" s='star' id="star_{#$k+1#}">
                                            {#foreach  from=$arr5 item=v1 key=k1#}
                                            <a class="s{#$v1#}" href="javascript:void(0);" v="{#$v1#}" onclick="$('#category_score{#$k+1#}').val($(this).attr('v'));$('#star_{#$k+1#}').removeClass();$('#star_{#$k+1#}').addClass('star star_'+$(this).attr('v'));">{#$v#}分</a>
                                            {#/foreach#}
                                            <input type='hidden' s='score' name='category_score{#$k+1#}' id='category_score{#$k+1#}' value='1' />
                                        </div></td>
                                    {#if ($k+1)%3 eq 0#}</tr><tr>{#/if#}
                                    {#/foreach#}
                                </tr>
                            </table>
                        </div>
                    </div>
                    {#/if#}
                </div>
                <div class="part_3" id="part_3" name="part_3">
                    <h3 class="c_title">用後感： (請上載 {#$product.min_pic_num#}-{#$product.max_pic_num#} 張有關試用情況和結果的相片)</h3>
                    <p class="p_text_s" id='mark2'></p>
                    <a class="btn_s btn_s_rule" href="javascript:void(0);" onclick="showLB('#dialog1',0)"><strong>報告規格</strong></a>
                    <ul class="upload_list">
                        {#foreach  from=$arr5_10 item=v1 key=k1#}

                        <li>
                            <div class="upload_box">
                                <div class="hd">
                                    <h2 class="b_title">相片{#$v1#}</h2>
                                </div>
                                <div class="bd">
									<div class="img_box"><p class="img_p"><span><img  s='img' id="showimg{#$v1#}" src="/data/p100x100.jpg" alt=""></span></p></div>
                                    <div class="info_box">
                                        <p class="desp">上載圖片</p>
                                        <a id="addpic_{#$v1#}" s="upload" class="btn_s btn_s_upload" href="javascript:void(0);"> <strong>選擇檔案</strong><input type="file" s='file_upload' class="file_upload" name="pic{#$v1#}" value="" id="pic{#$v1#}" onclick='c_pic({#$v1#})'/></a>
                                        <a id="delpic_{#$v1#}" s="del" class="btn_s btn_s_del" href="javascript:void(0);" onclick="delpic({#$v1#})" style="display:none"> <strong>刪除圖片</strong></a>
                                        <span s='fileinfo' id="fileinfo{#$v1#}" class="sp_notice">未選擇檔案</span>

                                        <input type='hidden' s='pic_path' id='pic_path{#$v1#}' name="pic[{#$v1#}][p]" value=''/>
                                        <input type='hidden' s='pic_c' id='pic_c{#$v1#}' name="pic_c[{#$v1#}][p]" value=''/>
                                        <input type='hidden' s='pic_info_size' id='pic_info_size{#$v1#}' name="pic[{#$v1#}][s]" value=0 />


                                        <p class="desp">相片說明</p>
                                        <textarea name="pic[{#$v1#}][t]" s="pic_info" class="pic_info" rows="8" cols="40" onfocus="pempty('mark3_{#$v1#}');" onblur='checkLength1(this,{#$v1#});' onkeyup="checkLength1(this,{#$v1#})"></textarea>
                                        <p class="p_text_s" id='mark3_{#$v1#}'>&nbsp;</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        {#/foreach#}

                    </ul>
                </div>
                <div class="part_4" id="part_4" name="part_4">
                    <h3 class="c_title">總結：(請以150-300字內填寫)</h3>
                    <textarea class="summary" style='margin-bottom:0px;' name="content" id="content" rows="8" cols="40" onfocus="pempty('mark4');" onblur='checkLength2(this)' onkeyup="checkLength2(this)"></textarea>
                    <input type='hidden' s='content_size' id='content_size' name="content_size" value=0 />
                    <p class="p_text_s" style='margin-bottom:12px;' id='mark4'>&nbsp;</p>
                    <p class="rule">
                        ** 請依照上述指示的{#$mtxt#}期間、日數及使用方法，完成整個測試產品過程。 <br>

                        ** 上載照片的檔案大小不可超過 5 MB。 <br>
                        ** 如未能於截止日前遞交有效及詳細之{#$mtxt#}報告，將不獲受理。 <br>

                        ** 閣下所填寫之資料，將用作網站內產品總評報告之用途，並登載於網站上。 <br>
                        ** 如評鑑結果與其他用戶的評鑑有太大差別，該報告或不會被登載。 <br>
                        ** 超過一次未能準時提交合規格之{#$mtxt#}報告者，將被取消於體驗團之成員資格。 <br>

                        ** iMORE 保留更改是次活動之條款及細則的權利，而不作另行通知。 <br>
                        ** 如有任何爭議，iMORE 將保留一切最終決定權。
                    </p>
                    <div class="button_box {#if $show_draft_bt eq 1#}bb_btn_4{#else#}bb_btn_3{#/if#}">
                        <a class="btn_box btn_r_box" href="javascript:void(0);" onclick="$('#pic_form').attr('action','/product.php?action=report_add').attr('target','iframe1').submit();">遞交</a>
                        <a class="btn_box btn_b_box" href="javascript:void(0);" onclick="ireset();">重設</a>
                        <a class="btn_box btn_r_box" href="javascript:void(0);" onclick="$('#pic_form').attr('action','/product.php?action=reportDetail&pview=1').attr('target','_blank').submit();">預覽</a>
                        {#if $show_draft_bt eq 1#}
                        <a class="btn_box btn_b_box" href="javascript:void(0);" onclick="$('#pic_form').attr('action','/product.php?action=report_add&is_draft=1').attr('target','iframe1').submit();">存為草稿</a>
                        {#/if#}
                    </div>
                </div>
            </form>
        </div>
        <div class="ft"></div>
    </div>

</div><!--body-->

<div id="fullbg"></div>
<div id='dialog' class="popup popup_2" style="z-index: 60;	display:none;">
    <a class="btn_close" href='javascript:void(0);' onclick="closeLB();window.location.href='/';"></a>
    <div class="alert_box b_box">
        <div class="hd">
            <h2 class="hd_title">提示信息</h2>
        </div>
        <div class="bd">
            <p><span class="sp_pink">你已成功提交報告！</span>有關報告將交由 iMORE 編輯部處理及刊登。<br>
                如提交之報告未能合乎規格，iMORE 有權不作刊登或要求會員重新遞交。</p>
            <a class="btn_b btn_b_view" id='rep_show_bt' href="#"> <strong>查看評鑑產品</strong></a><a class="btn_b btn_b_more" href="/"> <strong>返回itrial 主頁</strong></a>
        </div>
    </div>
</div>

<div id='dialog1' class="popup popup_2" style="z-index: 60;	display:none;">
    <a class="btn_close" href='javascript:void(0);' onclick="closeLB()"></a>
    <div class="alert_box b_box">
        <div class="hd">
            <h2 class="hd_title">提示信息</h2>
        </div>
        <div class="bd">
            {#if $mtype eq 5#}體驗達人{#else#}試用專員{#/if#}報告規格<br><br>
            a. 總評：150 至 300 字<br><br>
            b. {#$product.min_pic_num#} - {#$product.max_pic_num#} 張圖片，必須包括以下內容：<br>
            i)  使用前 (Before) 正面圖片，必須顯示完整及清晰容貌<br>
            ii) 使用後 (After) 正面圖片，必須顯示完整及清晰容貌<br>
            iii) 試用過程及效果對比<br>
            iv) 產品外貌<br><br>
            c. 圖片說明 : 20 至 50 字可參考以下內容分享產品體驗的重點：<br>
            1) 產品的氣味 / 觸感 / 色澤 <br>
            2) 產品包裝評語<br>
            3) 使用多久才有效果<br>
            4) 肌膚 / 髮質 / 身體狀況有何改善<br>
            5) 效果之持久度<br>
            6) 依照評價項目逐項點評
        </div>
    </div>
</div>
<div style="top:400px;z-index:60;display:none;" class="apopbox popbox b_box" id="dialog_popup">
    <div class="hd">
        <h2 class="ir ht"><span>提示信息 ALERT</span></h2>
        <a class="popclose" onclick="closeLB();" style="cursor:pointer">close</a>            </div>
    <div class="bd">
        <p id="popupText"></p>
        <a class="btn_b btn_s_im_back" href="javascript:void(0);" onclick="closeLB();"><strong>立即返回</strong></a>
    </div>
</div>
<div id='dialog3' class="popup popup_2" style="z-index: 60;display:none;">
    <a class="btn_close" href='javascript:void(0);' onclick="closeLB();window.location.href='/';"></a>
    <div class="alert_box b_box">
        <div class="hd">
            <h2 class="hd_title">提示信息</h2>
        </div>
        <div class="bd">
            <p>你已成功將此報告存為草稿<br/>下次請于會員中心點擊此產品進行草稿編輯。</p>
            <a class="btn_b btn_b_view" id='rep_show_bt1' href="#"> <strong>查看評鑑產品</strong></a><a class="btn_b btn_b_more" href="/"> <strong>返回itrial 主頁</strong></a>
        </div>
    </div>
</div>
<iframe id="iframe1" name="iframe1" style="display:none"></iframe>

<link rel="stylesheet" href="/js/ui/jquery-ui-1.8.8.custom.css" />
<script src="/js/ui/jquery-ui-1.8.8.custom.min.js"></script>
<script>
        (function($){
            $.fn.imgIframeUpload = function(settings){
                var form;
                var iframe;
                var	self = this;
                var	selfId = self.attr('id');
                var	opts = {
                    action: "/product.php?action=ajax&t=8&pic_id="+settings['pic_id'],
                    callback: null
                };
                $.extend(opts, settings);

                form = $('<form method="post" action="' + opts.action + '" enctype="multipart/form-data" target="iframe-upload-' + selfId + '" style="display:none;"><input type="hidden" name="old_temp" /><input type="hidden" name="callback_script" value="' + (opts.callback ? ('parent.' + opts.callback + '($res);') : '') + '" /></form>');
                iframe = $('<iframe name="iframe-upload-' + selfId + '" frameborder="0" style="display:none;" src="about:blank"></iframe>');
                $('body').append(form).append(iframe);
                function fileChange(obj){
                    obj.change(function(){
                        var fileInputClone = $(this).clone().val('').hide();
                        $(this).after(fileInputClone).attr('name', 'temp[]').removeAttr('id').appendTo(form);
                        fileInputClone.css('display', 'inline');
                        fileChange(fileInputClone);
                        form.submit();
                        $(this).remove();
                    });
                }
                fileChange(self);
            }
        })(jQuery);
        function upPicCallback(res){
            if(res){
                if(res[0].code == 1){
                    $('#pic_path'+res[0].pic_id).val(res[0].src);
                    $('#pic_c'+res[0].pic_id).val(res[0].filename+'|'+res[0].size);
                    $('#fileinfo'+res[0].pic_id).html(res[0].filename);
                    $('#showimg'+res[0].pic_id).attr('src',res[0].thumb);
                    $('#addpic_'+res[0].pic_id).hide();
                    $('#delpic_'+res[0].pic_id).show();
                }else{
                    showpop(res[0].msg);
                }
            }
            $(window).focus();
        }
        function c_pic(pic_id){
            $('#pic'+pic_id).imgIframeUpload({
                callback: 'upPicCallback',
                pic_id:pic_id
            });
        }

        function checkLength1(which,k) {
            $('#pic_info_size'+k).val(which.value.length);
            $('#mark3_'+k).html('已輸入 '+which.value.length+' 字！');
        }
        function checkLength2(which) {
            $('#content_size').val(which.value.length);
            $('#mark4').html('已輸入 '+which.value.length+' 字！');
        }
</script>
</div>
</body>
</html>